<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/font-awesome.css}" rel="stylesheet"/>
    <link th:href="@{/css/animate.css}" rel="stylesheet"/>
    <link th:href="@{/css/style.css}" rel="stylesheet"/>

</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-6">
                
                    <div class="ibox-content">
                        <form class="form-horizontal m-t" id="roomForm" action="/addRoom" method="post">
                        	<div class="form-group">
                                <label class="col-sm-3 control-label">使用者：</label>
                                <div class="col-sm-8">
                                    <input id="userId" type="text" class="form-control" name="userId" placeholder="请输入数字" onkeyup="value=value.replace(/[^\d]/g,'')" />
                                </div>
                            </div>
                           <div class="form-group">
                                <label class="col-sm-3 control-label">大小：</label>
                                <div class="col-sm-8">
                                    <input id="roomSize" type="text" class="form-control" name="roomSize" placeholder="请输入数字" onkeyup="value=value.replace(/[^\d]/g,'')"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">地点：</label>
                                <div class="col-sm-8">
                                    <input id="roomAddress" type="text" class="form-control" name="roomAddress"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">容纳人数：</label>
                                <div class="col-sm-8">
                                    <input id="roomPerson" type="text" class="form-control" name="roomPerson" placeholder="请输入数字" onkeyup="value=value.replace(/[^\d]/g,'')"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">会议室开始时间：</label>
                                <div class="col-sm-8">
                                    <input id="roomUsedStart"  class="form-control layer-date " placeholder="选择时间"
                                           onclick="laydate({istime: true, format:'YYYY-MM-DD hh:mm:ss'})" name="roomUsedStart"/>
                                    <label class="laydate-icon"></label>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">会议室结束时间：</label>
                                <div class="col-sm-8">
                                     <input id="roomUsedEnd"  onclick="laydate({istime: true, format:'YYYY-MM-DD hh:mm:ss'})"
                                       placeholder="选择时间"    class="form-control layer-date" name="roomUsedEnd"/>
                                    <label class="laydate-icon"></label>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-4 col-sm-offset-3">
                                    <button class="btn btn-primary" id="submitBtn" type="button">提交</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>    
        </div>
    </div>


    <!-- 全局js -->
    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>

    <!-- 自定义js -->
    <script th:src="@{/js/content.js}"></script>

    <!-- jQuery Validation plugin javascript-->
    <script th:src="@{/js/plugins/validate/jquery.validate.min.js}"></script>
    <script th:src="@{/js/plugins/validate/messages_zh.min.js}"></script>

    <script th:src="@{/js/demo/form-validate-demo.js}"></script>

    <script th:src="@{/js/jquery.form.js}"></script>

    <script th:src="@{/js/plugins/layer/layer.min.js}"></script>
    <script th:src="@{/js/plugins/layer/laydate/laydate.js}"></script>

    <script>
        $(function (){
            $("#submitBtn").on("click",function () {
                var c=$("#userId").val();
                if(c==""){
                    layer.msg("用户不能为空");
                    return;
                }
                var a=$("#roomUsedStart").val();
                var b=$("#roomUsedEnd").val();
                if(a==""||b==""){
                    layer.msg("时间不能为空！");
                    return;
                }
                $("#roomForm").ajaxSubmit({
                    success:function (data) {
                        if(data=="成功"){
                            layer.msg("添加"+data);
                            setTimeout(function () {
                            parent.location.reload();
                            var index=parent.layer.getFrameIndex(window.name);
                            parent.close(index);
                            },1000)
                        }else {
                            layer.msg("添加"+data);
                        }
                    }
                })
            })
        });

        laydate({
            elem: '#hello', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
            event: 'focus' //响应事件。如果没有传入event，则按照默认的click
        });

        //日期范围限制
        var start = {
            elem: '#start',
            format: 'YYYY/MM/DD hh:mm:ss',
            min: laydate.now(), //设定最小日期为当前日期
            max: '2099-06-16 23:59:59', //最大日期
            istime: true,
            istoday: false,
            choose: function (datas) {
                end.min = datas; //开始日选好后，重置结束日的最小日期
                end.start = datas //将结束日的初始值设定为开始日
            }
        };

        var end = {
            elem: '#end',
            format: 'YYYY/MM/DD hh:mm:ss',
            min: laydate.now(),
            max: '2099-06-16 23:59:59',
            istime: true,
            istoday: false,
            choose: function (datas) {
                start.max = datas; //结束日选好后，重置开始日的最大日期
            }
        };
        laydate(start);
        laydate(end);
    </script>
</body>

</html>
